<!DOCTYPE html>
<!-- saved from url=(0047)http://www.jq22.com/demo/CropperUpload20170111/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<title>Document</title>
		<link href="/lvds/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
		<link href="/lvds/css/plugins/cropper/cropper.min.css" rel="stylesheet">
		<link href="/lvds/css/plugins/cropper/sitelogo.css" rel="stylesheet">
		<link href="/lvds/css/font-awesome.css?v=4.4.0" rel="stylesheet">
		<style type="text/css">
		.avatar-btns button {
			    height: 35px;
			}
		body {
		   background: none;
	     }  
		</style>
		
		
	</head>

	<body class="modal-open" style="">
		<div class="modal fade in" id="avatar-modal" aria-hidden="false" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1" style="display: block;">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					
					<form class="avatar-form">
						<div class="modal-header">
							<button class="close closeWin" data-dismiss="modal" type="button">×</button>
							<h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
						</div>
						<div class="modal-body">
							<div class="avatar-body">
								<div class="avatar-upload">
									<input class="avatar-src" name="avatar_src" type="hidden">
									<input class="avatar-data" name="avatar_data" type="hidden">
									<label for="avatarInput" style="line-height: 35px;">图片上传</label>
									<button class="btn btn-danger" type="button" style="height: 35px;" onclick="$(&#39;input[id=avatarInput]&#39;).click();">请选择图片</button>
									<span id="avatar-name"></span>
									<input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file"></div>
								<div class="row">
									<div class="col-md-9">
										<div class="avatar-wrapper"></div>
									</div>
									<div class="col-md-3">
										<div class="avatar-preview preview-lg" id="imageHead"></div>
									</div>
								</div>
								<div class="row avatar-btns">
									<div class="col-md-4">
										<div class="btn-group">
											<button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"> 向左旋转</button>
										</div>
										<div class="btn-group">
											<button class="btn  btn-danger fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"> 向右旋转</button>
										</div>
									</div>
									<div class="col-md-5" style="text-align: right;">								
										<button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">
							            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
							            </span>
							          </button>
							          <button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片">
							            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">
							              <!--<span class="fa fa-search-plus"></span>-->
							            </span>
							          </button>
							          <button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片">
							            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">
							              <!--<span class="fa fa-search-minus"></span>-->
							            </span>
							          </button>
							          <button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置图片">
								            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;reset&quot;)" aria-describedby="tooltip866214">
								       </span></button>
							        </div>
									<div class="col-md-3">
										<button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" data-dismiss="modal"> 保存修改</button>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

		<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
		<script src="/lvds/js/plugins/cropper/html2canvas.min.js"></script>
		<script src="/lvds/js/jquery-1.10.2.js"></script>
		<!-- 全局js -->
	    <script src="/lvds/js/jquery.min.js?v=2.1.4"></script>
	    <script src="/lvds/js/bootstrap.min.js?v=3.3.6"></script>
		<script src="/lvds/js/plugins/cropper/cropper.js"></script>
		<script src="/lvds/js/plugins/cropper/sitelogo.js"></script>
		<script src="/lvds/js/plugins/layer/layer.min.js"></script>
		<script type="text/javascript">
		//做个下简易的验证  大小 格式 
			$('#avatarInput').on('change', function(e) {
				var filemaxsize = 1024 * 5;//5M
				var target = $(e.target);
				var Size = target[0].files[0].size / 1024;
				if(Size > filemaxsize) {
					alert('图片过大，请重新选择!');
					$(".avatar-wrapper").childre().remove;
					return false;
				}
				if(!this.files[0].type.match(/image.*/)) {
					alert('请选择正确的图片!');
				} else {
					var filename = document.querySelector("#avatar-name");
					var texts = document.querySelector("#avatarInput").value;
					var teststr = texts; //你这里的路径写错了
					testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
					filename.innerHTML = testend;
				}
			
			});

			$(".avatar-save").on("click", function() {
				var img_lg = document.getElementById('imageHead');
				// 截图小的显示框内的内容
				html2canvas(img_lg, {
					allowTaint: true,
					taintTest: false,
					onrendered: function(canvas) {
						canvas.id = "mycanvas";
						//生成base64图片数据
						var dataUrl = canvas.toDataURL("image/jpeg");
						var newImg = document.createElement("img");
						newImg.src = dataUrl;
						imagesAjax(dataUrl);
					}
				});
			})
			
			function imagesAjax(src) {
				var data = {};
				data.base64Image = src.replace("data:image/jpeg;base64,","");
				//console.log(data.base64Image);
				$.ajax({
					url: "/lvds/cities/uploadImg",
					data: data,
					type: "POST",
					dataType: 'json',
					success: function(data) {
						if (data.errcode == '0') {
							layer.alert(data.errmsg, {
								icon : 1
							}, function(index) {
								parent.$("#column_ico").val(data.imgUrl);
								//刷新表格数据
								window.parent.corpperClose();
								//关闭提示框
								layer.close(index);
							});
						} else {
							layer.alert(data.msg, {
								icon : 2
							});
						}
						;
					},
					error : function() {
						layer.alert('保存图片失败！', {
							icon : 2
						});
					}
				});
			}
			$('.closeWin').click(function() {
				
				window.parent.corpperClose();
			});
		</script>
	

<div class="modal-backdrop fade in"></div></body></html>